<template>
  <nav class="navbar is-dark topNav">
    <div class="container">
      <div class="navbar-brand">
        <router-link class="navbar-item" to="/">
          <i class="fa fa-home"></i>
        </router-link>
      </div>
      <div class="navbar-menu " id="topNav">
        <div class="navbar-start">
          <router-link class="navbar-item" to="/">博客</router-link>
        </div>
      </div>
       <div class="navbar-end navbar-men" v-if="auth">
        <div class="field is-grouped navbar-item">
          <div class="control">
            <button class="button is-small">
              <span class="icon">
                <i class="fa fa-user-plus"></i>
              </span>
              <span>GGB-Blog</span>
            </button>
          </div>
          <div class="control">
            <button
              class="button is-small is-info is-outlined"
              @click="signOut"
            >
              <span class="icon">
                <i class="fa fa-user"></i>
              </span>
              <span>退出</span>
            </button>
          </div>
        </div>
      </div>
      <div class="navbar-end navbar-men" v-else>
        <div class="field is-grouped navbar-item">
          <div class="control">
            <button class="button is-small" @click="signUp">
              <span class="icon">
                <i class="fa fa-user-plus"></i>
              </span>
              <span>注册</span>
            </button>
          </div>
          <div class="control">
            <button
              class="button is-small is-info is-outlined"
              @click="signIn"
            >
              <span class="icon">
                <i class="fa fa-user"></i>
              </span>
              <span>登录</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <teleport to="#modal" v-if="modal.visible">
      <!-- 插入组件 、 动态组件 -->
      <component :is="component" />
    </teleport>
  </nav>
</template>
<script lang="ts">

import { useModal } from "@/utils/useModal";
import { computed, defineComponent,ref,markRaw } from "vue";
import Signup from "@/views/Signup.vue";
import Signin from "@/views/Signin.vue";
import { useStore } from "@/store";


export default defineComponent({
  name: "NavBar",
  components: {Signup},
  setup(){
    const store=useStore()
    const auth=computed(()=>{
      return store.getState().loginUser.currentUserId
    })
    const modal=useModal()
    const component=ref()
    const signUp=()=>{
      component.value=markRaw(Signup)
      modal.showModal();
    }
    const signIn=()=>{
      component.value=markRaw(Signin)
      modal.showModal();
    }
    const signOut=async ()=>{
      await store.signOut()
    }

    return {signUp,signIn,modal,component,auth,signOut}
  }
});
</script>